<template>
    <div class="login-container">
        <a-row>
            <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
                <div class="login-container-form">
                    <div class="login-container-hello">系统登录</div>
                    <div class="login-container-title">
                        欢迎来到 {{ title }}
                    </div>
                    <a-form
                        :model="form"
                        @submit="handleSubmit"
                        @submit.prevent
                    >
                        <a-form-item>
                            <a-input
                                v-model:value="form.username"
                                placeholder="用户名"
                            >
                                <template v-slot:prefix>
                                    <UserOutlined
                                        style="color: rgba(0, 0, 0, 0.25)"
                                    />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input
                                v-model:value="form.password"
                                type="password"
                                placeholder="密码"
                            >
                                <template v-slot:prefix>
                                    <LockOutlined
                                        style="color: rgba(0, 0, 0, 0.25)"
                                    />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input
                                v-model:value="form.citycode"
                                type="citycode"
                                placeholder="城市代码"
                            >
                                <template v-slot:prefix>
                                    <LockOutlined
                                        style="color: rgba(0, 0, 0, 0.25)"
                                    />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-button
                                type="primary"
                                html-type="submit"
                                :disabled="
                                    form.username === '' || form.password === ''
                                "
                            >
                                登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-col>
        </a-row>
        <div class="login-container-tips">
            基于vue{{ dependencies['vue'] }}
            + ant-design-vue
            {{ dependencies['ant-design-vue'] }}
        </div>
    </div>
</template>
<script>
    import { dependencies, devDependencies } from '*/package.json'
    import { mapActions, mapGetters } from 'vuex'
    import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
    import md5 from 'md5'
    export default {
        name: 'Login',
        components: {
            UserOutlined,
            LockOutlined,
        },
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                    citycode: '',
                },
                redirect: undefined,
                dependencies: dependencies,
                devDependencies: devDependencies,
            }
        },
        computed: {
            ...mapGetters({
                logo: 'settings/logo',
                title: 'settings/title',
            }),
        },
        watch: {
            $route: {
                handler(route) {
                    this.redirect = (route.query && route.query.redirect) || '/'
                },
                immediate: true,
            },
        },
        mounted() {
            this.form.username = ''
            this.form.password = ''
            /*  setTimeout(() => {
        this.handleSubmit()
      }, 3000) */
        },
        methods: {
            ...mapActions({
                login: 'user/login',
            }),
            handleRoute() {
                console.log('handleRoute:' + this.redirect)
                return this.redirect === '/404' || this.redirect === '/403'
                    ? '/'
                    : this.redirect
            },
            async handleSubmit() {
                this.form.password = md5(this.form.password)
                console.log(this.redirect)
                await this.login(this.form)
                console.log(this.redirect)
                await this.$router.push(this.handleRoute())
            },
        },
    }
</script>
<style lang="less">
    .login-container {
        width: 100%;
        height: 100vh;
        background: url('~@/assets/login_images/login_background.png');
        background-size: cover;
        &-form {
            width: calc(100% - 40px);
            height: 380px;
            padding: 4vh;
            margin-top: calc((100vh - 380px) / 2);
            margin-right: 20px;
            margin-left: 20px;
            background: url('~@/assets/login_images/login_form.png');
            background-size: 100% 100%;
            border-radius: 10px;
            box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
        }
        &-hello {
            font-size: 32px;
            color: #fff;
        }
        &-title {
            margin-bottom: 30px;
            font-size: 20px;
            color: #fff;
        }
        &-tips {
            position: fixed;
            bottom: @vab-margin;
            width: 100%;
            height: 40px;
            color: rgba(255, 255, 255, 0.856);
            text-align: center;
        }
        .ant-col {
            width: 100%;
            padding: 0 10px 0 10px;
        }
        .ant-input {
            height: 35px;
        }
        .ant-btn {
            width: 100%;
            height: 45px;
            border-radius: 99px;
        }
    }
</style>
